<template>
	<view>
		<view class="tab">
			<view class="item" :class="{'active':type==-1}" @click="tab(-1)">全部</view>
			<view class="item" :class="{'active':type==0}" @click="tab(0)">申请</view>
			<view class="item" :class="{'active':type==1}" @click="tab(1)">已预约</view>
			<view class="item" :class="{'active':type==2}" @click="tab(2)">拒绝</view>
		</view>
		<view class="list">
				<view class="item" v-for="item in list">
					<view class="s_con">订单号：{{item.ordersn}}</view>
					<view class="info">
						<image :src="item.thumb"></image>
						<view class="s_info">
							<view class="clamp">{{item.goodstitle}}</view>
							<view class="s_con">支付价：￥{{item.price}}</view>
							<view class="s_con">购买时间：{{item.paytime}}</view>
							<view class="s_con">提交时间：{{item.applytime}}</view>
						</view>
					</view>
					<view class="flex">
						<view class="f_tit">预约信息：</view>
						<view class="r_infos">
							<view class="r_info">
								<view>联系人：</view>
								<view>{{item.realname}}</view>
							</view>
							<view class="r_info">
								<view>联系电话：</view>
								<view>{{item.mobile}}</view>
							</view>
							<view class="r_info">
								<view>预约时间：</view>
								<view>{{item.yytime}}</view>
							</view>
							<view class="r_info">
								<view>备注：</view>
								<view>{{item.content}}</view>
							</view>
							<view class="r_info">
								<view>状态：</view>
								<view>{{item.statusstr}}</view>
							</view>
						</view>
					</view>
					<view class="btns" v-if="item.status==0">
						<button size="mini" type="warn" @click="apply(item.orderid,2)">拒绝申请</button>
						<button size="mini" type="primary" @click="apply(item.orderid,1)">确认预约</button>
					</view>
				</view>
				<view class="empty_loading">
					<image v-show="isloading" src="/static/business/loading.gif" mode=""></image>
					<text v-show="!ismore">到底了~</text>
				</view>
				<uni-popup ref="inputDialog" type="dialog">
					<uni-popup-dialog ref="inputClose" before-close="true"  mode="input" title="拒绝原因" placeholder="请填写原因" @close="closePop" @confirm="dialogInputConfirm"></uni-popup-dialog>
				</uni-popup>
			</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 0,
				isloading: false,
				ismore: false,
				page: 0,
				type: 0,
				id: 0,
				status: 0,
			};
		},
		onLoad() {
			this.getList();
		},
		onReachBottom() {
			this.getList();
		},
		methods: {
			tab(type){
				if(type==this.type) return;
				this.type = type;
				this.page = 0;
				this.list = [];
				this.getList();
			},
			getList(){
				this.page++;
				this.isloading = true;
				this.$axios('reservation/lists ','POST','member',{
					page: this.page,
					type: this.type
				}).then(res=>{
					this.isloading = false;
					if(res.data.code == 200){
						this.list = [...this.list, ...res.data.data];
						this.ismore = res.data.data.length > 0;
					}
				})
			},
			apply(id,status){
				this.id = id;
				this.status = status;
				if(status==2){
					this.$refs.inputDialog.open();
				}else{
					this.appsubmit(id,status,'')
				}
			},
			dialogInputConfirm(val) {
				if(val=='') return this.$api.msg('请填写拒绝原因');
				this.appsubmit(this.id,this.status,val);
			},
			closePop(){
				this.$refs.inputDialog.close()
			},
			appsubmit(id,status,val){
				this.$axios('reservation/check ','POST','member',{
					orderid: id,
					status: status,
					memo: val
				}).then(res=>{
					if(res.data.code == 200){
						this.$api.msg(res.data.data);
						this.page = 0;
						this.list = [];
						this.getList();
						this.$refs.inputDialog.close()
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background: #f8f8f8;
		padding-bottom: 40rpx;
	}
	.tab{
		display: flex;
		justify-content: space-between;
		position: fixed;
		width: 100%;
		background: #f8f8f8;
		z-index: 9;
		.item{
			width: 25%;
			line-height: 80rpx;
			text-align: center;
		}
		.active{
			background: #fff;
		}
	}
	.list{
		padding: 80rpx 20rpx;
		color:#999;
		font-size: 24rpx;
		.item{
			margin-bottom: 20rpx;
			background: #fff;
			padding: 20rpx;
			border-radius: 12rpx;
			.info{
				display: flex;
				image{
					width: 140rpx;
					height: 140rpx;
					border-radius: 12rpx;
				}
				.s_info{
					color:#999;
					font-size: 24rpx;
					width: calc(100% - 140rpx);
					padding-left: 16rpx;
					.clamp{
						color: #333;
						font-size: 28rpx;
					}
				}
			}
			.flex{
				display: flex;
				.f_tit{
					width: 140rpx;
					margin-right: 16rpx;
					text-align: right;
					font-size: 28rpx;
					color: #333;
				}
			}
			.r_info{
				display: flex;
			}
			.btns{
				display: flex;
				justify-content: flex-end;
				margin-top: 20rpx;
				button{
					margin: 0;
					margin-left: 40rpx;
				}
			}
		}
	}
</style>
